<template>
  <div class="home">
    <bread-crumb title="VIP会员"></bread-crumb>
    <div class="new_row">
      <el-button type="primary" @click="addSysUser">添加VIP用户</el-button>
    </div>
    <el-table :data="datas" border stripe>
      <el-table-column prop="id" label="用户编号" width="50"></el-table-column>
      <el-table-column prop="username" label="用户名" width="100"></el-table-column>
      <el-table-column prop="phone" label="手机号" width="150"></el-table-column>
      <el-table-column prop="sex" label="性别" width="50"></el-table-column>
      <el-table-column align="center" prop="head" label="头像" width="100">
        <template slot-scope='scope'>
          <img v-show="scope.row.head" :src="$http.defaults.baseURL + scope.row.head" width="50px" height="50px" style="border-radius: 50%;">
        </template>
      </el-table-column>
      <el-table-column align="center" prop="is_active" label="是否激活" width="150">
        <template slot-scope='scope'>
          <span v-if="scope.row.is_active">是</span>
          <span v-else>否</span>
        </template>
      </el-table-column>
      <el-table-column prop="last_login" label="最后登录时间" width="250"></el-table-column>
      <el-table-column
            fixed="right"
            label="操作"
            width="200">
            <template slot-scope="scope">
              <el-button @click="editRow(scope.row)" type="primary" size="small">编辑</el-button>
              <el-button @click="delRow(scope.row)" type="danger" size="small">删除</el-button>
            </template>
          </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalRows">
     </el-pagination>
     <el-dialog title="删除提醒" :visible.sync="is_show" @close="is_show=false">
       <span class="text-danger">{{ del_msg }}</span>
       <div slot="footer">
         <el-button @click="is_show=false">取消</el-button>
         <el-button @click="delData" type="danger">确定</el-button>
       </div>
     </el-dialog>
     <el-dialog :title="editOrAddTitle" :visible.sync="edit_is_show" @close="editForm = {}">
       <el-form :model="editForm" class="editForm">
         <el-form-item label="用户名">
           <el-input v-model="editForm.username" auto-complete="off" :disabled="disabled"></el-input>
         </el-form-item>
         <el-form-item label="手机号">
           <el-input v-model="editForm.phone"></el-input>
         </el-form-item>
         <el-form-item label="口令">
           <el-input type="password" clearable show-password v-model="editForm.password"></el-input>
         </el-form-item>
         <el-form-item label="邮箱">
           <el-input v-model="editForm.email"></el-input>
         </el-form-item>
         <el-form-item label="激活状态">
           <el-checkbox v-model="editForm.is_active"></el-checkbox>
         </el-form-item>
       </el-form>
       <div slot="footer">
         <el-button @click="edit_is_show=false">取消</el-button>
         <el-button @click="saveForm" type="primary">确定</el-button>
       </div>
     </el-dialog>
  </div>
</template>

<script>

export default {
  name: 'Home',
  data () {
    return {
      datas: [],
      currentPage: 1,
      pageSize: 10,
      totalRows: 0,
      is_show: false,
      del_msg: '是否删除',
      del_item: {},
      editOrAddTitle: '修改数据',
      edit_is_show: false,
      editForm: {},
      editData: {},
      disabled: false
    }
  },
  methods: {
    loadData () {
      // this.$http.get('/show/?page=' + this.currentPage + '&size=' + this.pageSize).then(resp => {
      //   const { data, total, pages, page, pageSize } = resp.data
      //   this.shows = data
      //   console.info(resp.data)
      //   this.totalRows = total
      // })
      this.$http.get('/adminapi/vipuser/?page=' + this.currentPage + '&page_size=' + this.pageSize).then(resp => {
        const { results, count } = resp.data
        this.datas = results
        this.totalRows = count
      })
    },
    addSysUser () {
      this.editForm.title = '新增系统用户'
      this.edit_is_show = true
      this.disabled = false
    },
    editRow (editData) {
      this.edit_is_show = true
      this.disabled = true
      // 初始显示的数据
      this.editForm = {
        username: editData.username,
        id: editData.id,
        phone: editData.phone,
        password: editData.password,
        email: editData.email,
        is_acitve: editData.is_acitve
      }
    },
    saveForm () {
      if (this.disabled) {
        const { id, username } = this.editForm
        // 删除对象的属性(不修改的)
        delete this.editForm.id
        delete this.editForm.username
        this.$http.patch('/adminapi/vipuser/' + id + '/', this.editForm).then(resp => {
          console.info(resp.data)
          this.edit_is_show = false
          this.loadData()
          this.editForm = {} // 清空之前绑定的数据
        })
      } else {
        this.$http.post('/adminapi/vipuser/', this.editForm).then(resp => {
          console.info(resp.data)
          this.edit_is_show = false
          this.loadData()
        })
      }
    },
    delRow (item) {
      this.del_item = item
      this.is_show = true
      this.del_msg = '亲，真的忍心删除' + item.username + ':' + (item.phone ? item.phone : '') + '吗？'
    },
    delData () {
      this.$http.delete('/adminapi/sysuser/' + this.del_item.id + '/').then(resp => {
        console.info(resp.data)
        this.loadData() // 刷新页面数据，重新装载数据
        this.$message.success('数据删除成功')
        this.is_show = false
      })
    },
    handleSizeChange (size) {
      console.info(size)
      this.currentPage = 1
      this.pageSize = size
      this.loadData()
    },
    handleCurrentChange (page) {
      console.info(page)
      this.currentPage = page
      this.loadData()
    }
  },
  mounted () {
    this.loadData()
  }
}
</script>

<style scoped="scoped">
  .new-row{
    padding: 10px;
    text-align: left;
  }
</style>
